<template>
    <li>
        <div class="tree-menu-li " v-if="model.children" @click="toggle" :cm="menuCode" :cl="level"
             :class="[getFirstTit]"
        >

            <div class="go-left">
                 <span class="c-def">
            <!--<div class="circle"></div>-->
            <i class="circle" :class="[open ? 'folder-open': 'folder',getLevelClassName]"></i>
         {{ model.menuName }}
          </span>
            </div>

            <i :class="[{'fa fa-chevron-down':open, 'fa fa-chevron-right go-right': isFolder }]"
               v-if="this.model.children && this.model.children.length"
               class="fa fa-chevron-right " aria-hidden="true"></i>

        </div>
        <div v-if="!model.children" @click="routeGo($event,model.index,model.menuName)" :cm="menuCode" :cl="level"
             :class="[isNotCurrentActivityMenu ? '':activitiClass ]">
            <span class="pd16 c-def"
            >
                    <i class="circle" :class="[getLevelClassName]"></i>
                   {{ model.menuName }}
            </span>
        </div>

        <div :class="[getSubClassName]">
            <ul v-show="open" v-if="isFolder" class="sub-side" :class="[{'unchecked':open, 'down_2': isFolder }]">
                <tree-menu v-for="item in model.children" :model="item" :level="levelPlus"
                           :menuCode="item.menuCode"></tree-menu>
            </ul>
        </div>
    </li>
</template>

<script>
    import * as type from '../../../store/types';
    export default {
        name: 'treeMenu',
        props: {
            model: '',
            menuCode: '',
            goClick: {
                type: Function
            },
            level: {
                type: Number,
                require: true
            },
        },
        data() {
            return {
                open: false,
//                isFolder: true,
                className: 'menu_',
                classNameSub: 'item_',
                classTem: "tem_",
                firstTit: 'first_tit_',
                activitiClass: 'hasBack',
                errorClass: 'removeBack'
//                menuCode:menuCode
//                isNotCurrentActivityMenu:false
            }
        },
        computed: {
            isNotCurrentActivityMenu: function () {
//                console.log("执行了")
                let array = this.$store.state.currentActivityMenue;
//                console.log(array)
                for (var i = 0; i < array.length; i++) {
                    if (array[i] == this.menuCode) {
//                        console.log(false);
                        return false;

                    }
                }

//                alert(true)
//                console.log(true)
                return true;
            },
            getLevelClassName: function () {
                let levels = this.level + 1;
                this.className = this.className + levels;
                return this.className;
            },
            isFolder: function () {

                return this.model.children && this.model.children.length;
            },
            getClassByMenuCode: function () {
                let menuCode = this.menuCode;
                alert(menuCode);
            },

            levelPlus: function () {
                let levels = this.level + 1;
                return levels;
            },
            getSubClassName: function () {
                let levels = this.level + 1;
                this.classNameSub = this.classNameSub + levels;
                return this.classNameSub;
            },
            getSubSpan: function () {
                let levels = this.level + 1;
                this.spanName = this.spanName + levels;
                return this.spanName;
            },
            getFirstTit: function () {
                let levels = this.level + 1;
                this.firstTit = this.firstTit + levels;
                return this.firstTit;
            }
        },
        methods: {
            getMenuCodes: function (evt, arr) {
                let cm = evt.getAttribute("cm");//获取当前的meuncode
                arr.push(cm);
                let cl = evt.getAttribute("cl");//拿到当前菜单的级别
//                console.log(cl);
                if (cl == 0) {
                    return;

                } else {
                    this.getMenuCodes(evt.parentNode.parentNode.parentNode.parentNode.firstChild, arr)
                }
            },
            toggle: function (evt) {
//                 alert(evt);
                let self = this;
                if (this.model.index) {
                    self.routeGo(evt, self.model.index, self.model.menuName)
                }
                if (this.isFolder) {
                    this.open = !this.open;
                }
//                console.log(this.$parent.menuCode);
                let a = new Array();
                this.getMenuCodes(evt.currentTarget, a);
//                console.log(a);
                this.$store.commit(type.REF_CURRENT_MENU, a);
//                console.log(this.$store.state.currentActivityMenue)
                return this.menuCode;
//                this.$emit('transferModel', this.model);
            },
            routeGo: function (evt, toRout, title) {
                let self = this;
                let a = new Array();
                this.getMenuCodes(evt.currentTarget, a);
//                console.log(a);
//                console.log(this.$store.state.currentActivityMenue)
                this.$store.commit(type.REF_CURRENT_MENU, a);
//                console.log(this.menuCode);
                if (toRout == undefined) {
                    console.log("并没有配置路由")
                } else {//路由到指定页面
                    let count = 0;
                    //判断是否已经打开
                    let titles = this.$store.state.titles;
                    for (let i = 0; i < titles.length; i++) {
                        let _title = titles[i].title;
                        if (_title == title) {//如果有已经打开的就激活当前标签页面
                            this.$store.commit(type.TITLES_ACTIVITY, i);
                            this.$store.commit(type.CHANGE_INDEX, toRout);
                            count++;
                            break;
                        }
                    }
                    console.log(self.model)
                    if (self.model && self.model.id) {
                        this.$store.commit(type.CATEGORY_ID_CHANGE, self.model);
                    }
                    this.$router.push({
                        name: '',
                        path: toRout,
                    });
                    if (count == 0) {
                        this.$store.commit(type.TITLES_ADD, {
                            title: title,
                            index: toRout,
                            menueCodes: a,
                            item: self.model.item
                        });
                        this.$store.commit(type.TITLES_ACTIVITY, this.$store.state.titles.length - 1);
                    }
                }
            }
        }
    }
</script>

<style>
    .tree-menu ul {
        list-style: none;
        color: #fff;
        /*overflow: auto;*/
    }

    .tree-menu-li {
        position: relative;
    }

    .tree-menu li {
        border-bottom: 0.5px solid #44474c;
        line-height: 40px;
        position: relative;
    }

    .tree-menu li a {
        color: #fff;
    }

    .uncheck {
        background: #303030;
    }

    .checked {
        background: #cc000b;
    }
    .go-left{
        width: 85%;
        display: inline-block;
    }
    .pd16 {
        padding-left: 16px;
    }

    .fa {
        vertical-align: inherit;
    }

    .go-color {
        color: red;
    }

    /*.go-right {*/
        /*margin-right: 16px;*/
        /*position: absolute;*/
        /*line-height: 40px;*/
        /*top: 0;*/
        /*right: 0;*/
    /*}*/

    .sub-side li {
        /*background: #3a3e44;*/
        border-top: 0.5px solid #44474c;
        border-bottom: 0;
    }

    .first_tit_1 {
        padding-left: 16px;
    }

    .first_tit_2, .menu_1 {
        margin-left: 16px;
    }

    .menu_2 {
        margin-left: 16px;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        border: 1px solid #fff;
        display: inline-block;
        background: #fff;
        margin-right: 4px;
        vertical-align: middle;
    }

    .menu_3 {
        display: inline-block;
    }

    .item_2 {
        background: #474b52;
        margin-left: 36px;
    }

    .item_1 {
        background: #4F545B;
    }

    .down_2 {
        color: #cc000b;
    }

    .removeBack {
        background: black;
    }

    .hasBack {
        background: red;
    }

    .tree-menu-li span:hover, .sub-side span:hover {
        cursor: default;
    }
    .c-def{
        cursor: default;
    }
</style>